<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>轮廓</title>

        <style type="text/css">
            .wrapper { 
                border: 1px solid transparent ; 
                width: 600px ; 
                height: 200px ; 
                margin: 25px auto ;
            }

            table { 
                border: 1px solid green ; 
                width: 100% ;
                border-collapse:collapse ;
            }

            table:hover {
                border-color: red ;
            }

            table td {
                vertical-align: middle ;
                text-align: center ;
                height: 50px ;
            }

            .input-container { width: 80% ; }
            .input-container input { width: 96% ; border: none ; outline: none ; }

            .button-container { width: 20% ; }
            .button-container input { 
                width: 100% ; 
                height: 100% ; 
                background-color: blue ;
                border: none ; 
                outline: blue solid 1px ; 
            }

        </style>

    </head>
    <body>

        <div class="wrapper">
            <form action="http://www.baidu.com/s" method="get" target="_blank">
                <table>
                    <tr>
                        <td class="input-container">
                            <input type="text" name="wd" >
                        </td>
                        <td class="button-container">
                            <input type="submit" value="百度一下">
                        </td>
                    </tr>
                </table>
            </form>
        </div>
        
    </body>
</html>